<template>
    <div id="businessStatistics" style="width: 100%; height: 100%; position: relative; z-index: 9;"></div>
</template>
<script>
import * as echarts from "echarts";
export default {
    name: 'businessStatistics',
    data() {
        return {
            data: [
                { value: 40, name: '项目部' },
                { value: 38, name: '市场部' },
                { value: 32, name: '设计部' },
                { value: 30, name: '客服部' },
                { value: 28, name: '财务部' },
                { value: 26, name: '行政部' },
                { value: 22, name: '新媒体' },
            ],
            flag: true
        }
    },
    mounted() {
        this.initChart();
    },
    methods: {
        initChart() {
            let dom = document.getElementById('businessStatistics');
            let chart = echarts.init(dom, 'chalk')
            let option = {
                legend: {
                    orient: 'vertical',
                    left: '60%',
                    y: 'center',
                    itemGap: 30,
                    itemHeight: 10,
                    itemWidth: 10,
                    padding: 10,
                    icon: "circle",
                    textStyle: {
                        fontSize: 14,
                        color: '#fff'
                    },
                    align: 'left',
                },
                series: [
                    {
                        name: 'Nightingale Chart',
                        type: 'pie',
                        radius: ['10%', '80%'],
                        center: ['30%', '50%'],
                        roseType: 'area',
                        itemStyle: {
                            borderRadius: 8,
                            normal: {
                                color: function (colors) {
                                    var colorList = [
                                        '#10BAF8',
                                        '#FF6A6B',
                                        '#9A60B4',
                                        '#ef6567',
                                        '#f9c956',
                                        '#3BA272',
                                        '#90EC7D'
                                    ];
                                    return colorList[colors.dataIndex];
                                }
                            },

                        },
                        data: this.data 
                    }
                ]
            };
            chart.setOption(option)
            // 监听屏幕变化自动缩放图表
            let observer = new ResizeObserver(function () {
                chart.resize();
            });
            observer.observe(dom)
        }
    }
}
</script>